import { useLayoutEffect,useState } from 'react';
function App2() {
    const[num,setNum]=useState(1)
    // 当num值变更时，浏览器会等呢个useLaoutEffect中的effect函数执行完毕再渲染，effect会阻塞很久，超过500ms会导致掉帧
    async function queryData(){
    const data=await new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(100)
        },2000)
    })
    return data
    }
    

    useLayoutEffect(()=>
    {
        console.log('useLayoutEffect');
        queryData().then(data=>{
            setNum(data)
        })
    },[])
    return(
        <div>
            <button onClick={()=>setNum(num+1)}>{num}</button>
        </div>
    )
}
export default App2;